import React from 'react';
import { Steps } from 'antd';

import { DiaogueMsg } from 'seats/schema/SocketMessage';
import { taskFlowrecord } from 'seats/servers/modules/CheckInOut';
import { Flowrecord } from 'seats/schema/CheckInOut';
import moment from 'moment';

const { Step } = Steps;

/**
 * 入参IProps
 */
interface IProps {
  /** callRecordId */
  callRecordId: string;
  /** 推送流程消息 */
  chatProgressRecord: DiaogueMsg;
}

/**
 * IStates状态
 */
interface IStates {
  /** 流程列表 */
  list: Flowrecord[];
}

class ProgressRecord extends React.Component<IProps, IStates> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      list: [],
    };
    this.getTaskFlowrecord = this.getTaskFlowrecord.bind(this);
    this.NodeType = this.NodeType.bind(this);
  }

  /**
   * 获取流程列表
   */
  async getTaskFlowrecord() {
    const { callRecordId } = this.props;
    if (!callRecordId) return false;
    const result = await taskFlowrecord(callRecordId);
    if (result.data) {
      const list: Flowrecord[] = result.data || [];
      const newlist: Flowrecord[] = [
        {
          index: 0,
          time: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
          nodeName: '问候语',
          matchIntent: '',
          nodeType: '',
        },
      ];
      // 处理数据
      for (let i = 0; i <= list.length - 1; i++) {
        const item = list[i];
        const index = i;
        newlist[index].matchIntent = item.matchIntent;
        newlist.push({
          index: item.index,
          time: item.time,
          nodeName: item.nodeName,
          matchIntent: '',
          nodeType: item.nodeType,
        });
      }
      console.log(newlist);
      this.setState({
        list: newlist,
      });
    }
  }

  /**
   * 匹配节点类型
   */
  NodeType(str: string) {
    let s = '';
    switch (str) {
      case 'StartComponent':
        s = '开始组件';
        break;
      case 'IntentComponent':
        s = '意图组件';
        break;
      case 'KeyComponent':
        s = '按键组件';
        break;
      case 'ConditionComponent':
        s = '条件组件';
        break;
      case 'InterfaceComponent':
        s = '接口组件';
        break;
      case 'SkipComponent':
        s = '跳转组件';
        break;
      case 'InfoCollectionComponent':
        s = '信息收集组件';
        break;
      case 'TransferManualServiceComponent':
        s = '转人工';
        break;
      case 'EndComponent':
        s = '结束组件';
        break;
    }
    return s;
  }

  /**
   * 首次渲染
   */
  componentDidMount(): void {
    this.getTaskFlowrecord();
  }

  /**
   * 再次渲染
   */
  componentDidUpdate(prevProps: any, preState: any): void {
    if (prevProps.callRecordId !== this.props.callRecordId) {
      this.getTaskFlowrecord();
    }

    // 推送消息过来 渲染
    const { chatProgressRecord } = this.props;
    const { list } = this.state;
    if (chatProgressRecord.index !== prevProps.chatProgressRecord.index) {
      console.log('chatProgressRecord', chatProgressRecord);
      const isExsit = list.find(item => item.index === chatProgressRecord.index);
      if (chatProgressRecord.speaker !== '1' || !chatProgressRecord.nodeName || isExsit) {
        return;
      }

      if (list.length > 0) {
        list[list.length - 1].matchIntent = chatProgressRecord.matchIntent;
      }
      list.push({
        time: chatProgressRecord.dateTime, //时间
        index: chatProgressRecord.index, //通话内容排列序号
        //匹配意图
        matchIntent: '',
        //组件节点名称
        nodeName: chatProgressRecord.nodeName,
        // 组件节点类型
        nodeType: chatProgressRecord.nodeType,
      });
    }
  }

  render() {
    const { list } = this.state;
    return (
      <div className="box-cont">
        <Steps progressDot current={list.length} direction="vertical">
          {list.map(item => {
            return (
              <Step
                key={item.index}
                title={item.nodeName}
                description={
                  item.matchIntent ? this.NodeType(item.nodeType) + ':' + item.matchIntent : ''
                }
              />
            );
          })}
        </Steps>
      </div>
    );
  }
}

export default ProgressRecord;
